<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edit Model Data</title>
<link rel="stylesheet" href="js/easyui-1.3.0/themes/default/easyui.css" />
<link rel="stylesheet" href="js/easyui-1.3.0/themes/icon.css" />
<script src="js/jquery/jquery-1.8.2.js"></script>
<script src="js/easyui-1.3.0/jquery.easyui.min.js"></script>
<script src="jsjson.js"></script>
<script src="js/uuid.js"></script>
<script type="text/javascript">
var lastIndex=-1;
var tableAllowEdit=true;
$(function(){
	
	var currentEditFlag=true;
	var table = $('#dg').datagrid({ 
	    rownumbers:true,
	    toolbar:[{
			text:'append',
			iconCls:'icon-add',
			handler:function(){
				table.datagrid('endEdit', lastIndex);
				if(tableAllowEdit==false){
					return;
				}
				var cols = table.datagrid('options')['columns'][0];
				var row = new Object();
				for(var i=0;i<cols.length;i++){
					row[cols[i]]="";
				}
				//row['uid']=new UUID().createUUID();;
				table.datagrid('appendRow',row);
				lastIndex = table.datagrid('getRows').length-1;
				table.datagrid('selectRow', lastIndex);
				table.datagrid('beginEdit', lastIndex);
				currentEditFlag=true;
			}
		},'-',{
			text:'delete',
			iconCls:'icon-remove',
			handler:function(){
				if(tableAllowEdit==false){
					return;
				}
				var row = table.datagrid('getSelected');
				if (row){
					var index = table.datagrid('getRowIndex', row);
					table.datagrid('deleteRow', index);
					var jsonData = new Object();
					jsonData.changeData= row;
					$('#jsonData').val(JSON.stringify(jsonData));
					
					//$('#changeData').val(JSON.stringify(row));
					$('#delData').click();
				}
			}
		}],
	    onAfterEdit:function(rowIndex, rowData, changes){
	    	changes['uid']=rowData['uid'];
	    	var jsonData = new Object();
			jsonData.changeData= changes;
			$('#jsonData').val(JSON.stringify(jsonData));
	    	//$('#changeData').val(JSON.stringify(changes));
			$('#saveData').click();
	    	table.datagrid('acceptChanges');
	    },
	    onClickRow:function(rowIndex){
	    	table.datagrid('selectRow', rowIndex);
	    	table.datagrid('unselectRow', lastIndex);
	    	if(tableAllowEdit==false){
	    		lastIndex = rowIndex;
	    		return;
	    	}
	    	if(currentEditFlag==false){
	    		table.datagrid('beginEdit', rowIndex);
				currentEditFlag=true;
	    	}else{
	    		table.datagrid('endEdit', lastIndex);
				currentEditFlag=false;
	    	}
			lastIndex = rowIndex;
		}
	});
	loadData();
});

function loadData(){
	var json = JSON.parse($('#jsonData').val());
	var rows = json.tableData.rows;
	var cols = json.columns;
	$('#dg').datagrid({columns:[cols]});
	if($('#dg').datagrid('getColumnOption','uid')){
		tableAllowEdit=true;
	}else{
		tableAllowEdit=false;
	}
	$('#dg').datagrid('loadData',rows);
}
function acceptChange(){
	$('#dg').datagrid('acceptChanges');
}
function updateUID(uid){
	$('#dg').datagrid('updateRow',{
		index: lastIndex,
		row: {
			uid: uid,
		}
	});
}
function query(){
	var jsonData = new Object();
	jsonData.querySql= $('#txtSql').val();
	$('#jsonData').val(JSON.stringify(jsonData));
	//$('#querySql').val(JSON.stringify(jsonData));
	$('#queryBySql').click();
	
}
</script>
</head>
<body>
<div class="easyui-panel" title="edit model data">
 <div>
    <label>query sql:</label>
    <textarea style="height:60px;" id="txtSql"></textarea>
    <a href="#" class="easyui-linkbutton" onclick="query()">query</a>
</div>
<table id="dg"></table>
</div>
	
<form wicket:id="form">
<input type="hidden" wicket:id="modelName"></input>
<input type="hidden" wicket:id="jsonData" id="jsonData"></input>
<a href="#" wicket:id="saveData" id="saveData"></a>
<a href="#" wicket:id="delData" id="delData"></a>
<a href="#" wicket:id="queryBySql" id="queryBySql"></a>
</form>	
</body>
</html>